<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta http-equiv="keywords" content="关键字,关键字,关键字"/>
  <meta http-equiv="pragma" content="no-cache"/>
  <meta http-equiv="cache-control" content="no-cache"/>
  <meta http-equiv="expires" content="0"/>
  <meta name="description" content="页面描述不超过150个字符"/>
  <meta name="Author" content="页面作者"/>
  <meta name="renderer" content="webkit"/>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <link rel="shortcut icon" href="../public/images/favicon.ico" type="image/x-icon" >
  <link rel="stylesheet" type="text/css" href="../public/layui/dist/css/layui.css"/>
  <link rel="stylesheet" href="../public/stylesheets/gx_main.min.css" />
  <link rel="stylesheet" type="text/css" href="../public/iconfont/iconfont.css">
  <!--[if lt IE 9]>
  <script src="../public/html5shiv/dist/html5shiv.min.js"></script>
  <script src="../public/respond/dest/respond.min.js"></script>
  <![endif]-->
  <script src="../public/jquery/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../public/layui/dist/layui.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="../public/highcharts-5.0.14/code/highcharts.js"></script>
  <!--mine-->
  <script src="../public/javascripts/gx_main.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="frame">

<form class="layui-form" action="">
  <table class="layui-table">
    <colgroup>
      <col width="250">
      <col>
    </colgroup>
    <tbody>
    <tr>
      <td class="lightBlue center">用户名</td>
      <td><input class="layui-input" id="user" type="text" required lay-verify="required" placeholder="请输入用户名" autocomplete="off">
      </td>
    </tr>
    <tr>
      <td class="lightBlue center">旧密码</td>
      <td><input class="layui-input" id="oldPwd" type="text" lay-verify="required" placeholder="请输入旧密码" autocomplete="off">
      </td>
    </tr>
    <tr>
      <td class="lightBlue center">新密码</td>
      <td><input class="layui-input" id="newPwd" type="text" lay-verify="newPwd" placeholder="请输入新密码" autocomplete="off">
      </td>
    </tr>
    <tr>
      <td class="lightBlue center">再次输入新密码</td>
      <td><input class="layui-input" id="verifyPwd" type="text" lay-verify="verifyPwd" placeholder="请确认新密码" autocomplete="off">
      </td>
    </tr>
  </table>
  <button class="layui-btn layui-btn-darkBlue" lay-submit lay-filter="changePWD_sub">立即提交</button>
  <button class="layui-btn layui-btn-darkBlue" type="reset">取&nbsp;&nbsp;消</button>
</form>
<script type="text/javascript">
  layui.use(['form','jquery'], function () {
    var form = layui.form, $ = layui.jquery;
    //自定义验证规则
    form.verify({
      newPwd:function(value){
        //获取旧密码
        var oldPwd = $("#oldPwd").val();
        if(new RegExp(oldPwd).test(value)){
          return '新密码和旧密码一致,请重新输入'
        }
      },
      verifyPwd: function (value) {
        //获取新密码
        var newPwd = $("#newPwd").val();
        if(!new RegExp(newPwd).test(value)){
          return '确认密码和新密码不一致'
        }
      }
    });
    //监听提交
    form.on('submit(changePWD_sub)', function (data) {
      console.log(data);
      //ajax提交
      $.ajax({
        url:'',
        type:'post',
        data:data.field,
        dataType:'json',
        success:function(data){
          layer.alert(data);
        },
        error:function(err){
          layer.alert(err);
        }
      });
      return false;
    });
  });
</script>

</body>
</html>